<template>
  <view class="container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showCityPicker">
        <text class="filter-text">{{ selectedCity }}</text>
        <text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
      </view>
      <view class="filter-item" @click="showSubjectPicker">
        <text class="filter-text">{{ selectedSubject }}</text>
        <text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
      </view>
      <view class="filter-item" @click="showTypePicker">
        <text class="filter-text">{{ selectedType }}</text>
        <text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
      </view>
      <view class="filter-item sexs" @click="showGenderPicker">
        <text class="filter-text">{{ selectedGender }}</text>
        <text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
      </view>
    </view>

    <!-- 认证信息 -->
    <!-- <view class="certification-info">
      <text class="cert-text">身份认证 · 学历认证</text>
    </view> -->

    <!-- 学生需求列表 -->
    <view class="student-list">
      <view class="student-card" v-for="(student, index) in studentList" :key="index" @click="viewStudentDetail(student)">
        <!-- 左侧状态区域 -->
        <view class="status-section">
          <view class="status-icon">
            <image class="status-avatar" :src="student.avatar" mode="aspectFill"></image>
          </view>
          <text class="status-text">{{ student.status }}</text>
        </view>

        <!-- 右侧信息区域 -->
        <view class="info-section">
          <!-- 科目和价格 -->
          <view class="header-row">
            <text class="subject">{{ student.subject }}</text>
            <text class="price">{{ student.price }}</text>
          </view>

          <!-- 描述 -->
          <view class="description">
            <text class="desc-text">{{ student.description }}</text>
          </view>

          <!-- 地址 -->
          <view class="location">
            <text class="location-icon">📍</text>
            <text class="location-text">{{ student.location }}</text>
          </view>
        </view>
      </view>
    </view>

    <EmptyState 
				v-if="studentList.length == 0"
				type="default"
				title="暂无需求"
				description="当前没有符合条件的需求"
				:show-button="true"
				button-text="刷新试试"
				@button-click="refreshStudents"
			/>

    <!-- 选择器组件 -->
    <!-- 城市选择器 -->
    <u-picker 
      :show="cityPickerShow" 
      :columns="cityColumns" 
      @confirm="confirmCity" 
      @cancel="cityPickerShow = false"
      title="选择城市"
    ></u-picker>

    <!-- 科目选择器组件 -->
    <SubjectPicker 
      :show="subjectPickerShow" 
      @confirm="confirmSubject" 
      @cancel="subjectPickerShow = false"
    />

    <!-- 教员类型选择器 -->
    <u-picker 
      :show="typePickerShow" 
      :columns="typeColumns" 
      @confirm="confirmType" 
      @cancel="typePickerShow = false"
      title="选择教员类型"
    ></u-picker>

    <!-- 性别选择器 -->
    <u-picker 
      :show="genderPickerShow" 
      :columns="genderColumns" 
      @confirm="confirmGender" 
      @cancel="genderPickerShow = false"
      title="选择性别"
    ></u-picker>
  </view>
</template>

<script>
import SubjectPicker from '@/components/SubjectPicker.vue'
import EmptyState from '@/components/common/EmptyState.vue'

/**
 * 学生需求列表页面
 * 展示家教需求信息
 */
export default {
  name: 'StudentListPage',
  components: {
    SubjectPicker,
    EmptyState
  },
  data() {
    return {
      // 筛选相关数据
      selectedCity: '南昌市',
      selectedSubject: '全部科目',
      selectedType: '全部类型',
      selectedGender: '性别',
      
      // 选择器显示状态
      cityPickerShow: false,
      subjectPickerShow: false,
      typePickerShow: false,
      genderPickerShow: false,
      
      // 城市数据
      cityColumns: [
        ['南昌市', '九江市', '景德镇市', '萍乡市', '新余市', '鹰潭市', '赣州市', '宜春市', '上饶市', '吉安市', '抚州市']
      ],
      
      // 教员类型数据
      typeColumns: [
        ['全部类型', '大学生教员', '专职老师', '退休教师', '在职教师', '研究生教员']
      ],
      
      // 性别数据
      genderColumns: [
        ['不限', '男', '女']
      ],
      
      // 学生需求列表
      studentList: [],
      
      // 原始数据列表（用于筛选）
      allStudentList: []
    }
  },
  onLoad() {
    this.loadStudentList();
  },
  methods: {
    /**
     * 加载学生需求列表（Mock数据）
     * 从本地JSON文件加载数据，支持筛选条件
     */
    loadStudentList() {
      uni.showLoading({
        title: '加载中...'
      });
      
      uni.request({
        url: '/static/data/student-list.json',
        success: (res) => {
          if (res.statusCode === 200 && res.data) {
            this.allStudentList = res.data.list || [];
            this.filterStudents();
          }
        },
        fail: (err) => {
          console.error('加载学生列表失败:', err);
          uni.showToast({
            title: '数据加载失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },

    /**
     * 显示城市选择器
     */
    showCityPicker() {
      this.cityPickerShow = true
    },

    /**
     * 显示科目选择器
     */
    showSubjectPicker() {
      this.subjectPickerShow = true
    },

    /**
     * 显示教员类型选择器
     */
    showTypePicker() {
      this.typePickerShow = true
    },

    /**
     * 显示性别选择器
     */
    showGenderPicker() {
      this.genderPickerShow = true
    },

    /**
     * 确认城市选择
     * @param {Object} e 选择结果
     */
    confirmCity(e) {
      this.selectedCity = e.value[0]
      this.cityPickerShow = false
      this.filterStudents()
    },

    /**
     * 确认科目选择
     * @param {Object} data 选择结果
     */
    confirmSubject(data) {
      this.selectedSubject = data.subject
      this.subjectPickerShow = false
      this.filterStudents()
    },

    /**
     * 确认教员类型选择
     * @param {Object} e 选择结果
     */
    confirmType(e) {
      this.selectedType = e.value[0]
      this.typePickerShow = false
      this.filterStudents()
    },

    /**
     * 确认性别选择
     * @param {Object} e 选择结果
     */
    confirmGender(e) {
      this.selectedGender = e.value[0]
      this.genderPickerShow = false
      this.filterStudents()
    },

    /**
     * 筛选学生
     * 根据筛选条件过滤学生列表
     */
    filterStudents() {
      console.log('筛选条件:', {
        city: this.selectedCity,
        subject: this.selectedSubject,
        type: this.selectedType,
        gender: this.selectedGender
      });
      
      // 从原始数据开始筛选
      let filteredList = [...this.allStudentList];
      
      // 按城市筛选
      if (this.selectedCity && this.selectedCity !== '全部城市') {
        filteredList = filteredList.filter(student => student.city === this.selectedCity);
      }
      
      // 按科目筛选
      if (this.selectedSubject && this.selectedSubject !== '全部科目') {
        filteredList = filteredList.filter(student => student.subject.includes(this.selectedSubject));
      }
      
      // 按教员类型筛选
      if (this.selectedType && this.selectedType !== '全部类型') {
        filteredList = filteredList.filter(student => student.teacherType === this.selectedType);
      }
      
      // 按性别筛选
      if (this.selectedGender && this.selectedGender !== '性别' && this.selectedGender !== '不限') {
        filteredList = filteredList.filter(student => student.gender === this.selectedGender || student.gender === '不限');
      }
      
      // 更新显示列表
      this.studentList = filteredList;
      
      console.log('筛选结果数量:', filteredList.length);
    },

    /**
     * 查看学生详情
     * @param {Object} student - 学生信息
     */
    viewStudentDetail(student) {
      uni.navigateTo({
        url: `/pages/jiajiao/student-detail?id=${student.id}`
      });
    },

    /**
     * 刷新学生列表
     */
    refreshStudents() {
      this.studentList = [];
      this.loadStudentList();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

/* 页面容器 */
.container {
  background: #f8f8f8;
  min-height: 100vh;
}

/* 筛选栏 */
.filter-bar {
  background: white;
  display: flex;
  padding: 20rpx;
  gap: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.filter-item {
  // flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 0;
  // background: #f8f8f8;
  // border-radius: 8rpx;
  // border: 1rpx solid #e0e0e0;
  .iconfont-v2 {
    font-size: 16rpx;
    color: #999;
  }
  &.sexs{
    margin-left: auto;
  }
}

.filter-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.iconfont-v2 {
  font-size: 20rpx;
  color: #999;
}

/* 学生列表 */
.student-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 学生卡片 */
.student-card {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  gap: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 左侧状态区域 */
.status-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  flex-shrink: 0;
}

.status-icon {
  position: relative;
}

.status-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: #f0f0f0;
}

.status-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

/* 右侧信息区域 */
.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

/* 科目和价格行 */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.subject {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b35;
  flex: 1;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b35;
  flex-shrink: 0;
}

/* 描述 */
.description {
  margin-bottom: 8rpx;
}

.desc-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

/* 地址 */
.location {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.location-icon {
  font-size: 24rpx;
  color: #999;
}

.location-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

/* 认证信息 */
.certification-info {
  padding: 20rpx 30rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.cert-text {
  font-size: 24rpx;
  color: #666;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .filter-bar {
    padding: 16rpx;
    gap: 16rpx;
  }
  
  .filter-item {
    padding: 12rpx 16rpx;
  }
  
  .filter-text {
    font-size: 26rpx;
  }
  
  .student-card {
    padding: 20rpx;
    gap: 20rpx;
  }
  
  .status-avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 35rpx;
  }
  
  .status-text {
    font-size: 22rpx;
  }
  
  .subject,
  .price {
    font-size: 28rpx;
  }
  
  .desc-text {
    font-size: 26rpx;
  }
  
  .location-text {
    font-size: 24rpx;
  }
}

/* 点击效果 */
.filter-item:active {
  background: #e8e8e8;
}

.student-card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}
</style>